<template>
	<view class="dynamic-page">
		<view class="dynamic-header">
			<text class="page-title">动态分享</text>
			<text class="page-subtitle">分享生活，交流想法</text>
		</view>

		<view class="publish-section">
			<view class="publish-card" @click="goToPublish">
				<view class="publish-avatar">
					<text class="avatar-text">+</text>
				</view>
				<view class="publish-content">
					<text class="publish-placeholder">分享你的想法...</text>
				</view>
			</view>
		</view>

		<view class="dynamic-list">
			<view class="dynamic-item" v-for="(item, index) in dynamicList" :key="index">
				<view class="user-info">
					<view class="user-avatar">
						<text class="avatar-text">{{ item.user.name.charAt(0) }}</text>
					</view>
					<view class="user-details">
						<text class="user-name">{{ item.user.name }}</text>
						<text class="publish-time">{{ item.time }}</text>
					</view>
				</view>

				<view class="dynamic-content">
					<text class="content-text">{{ item.content }}</text>
					<view class="content-images" v-if="item.images && item.images.length > 0">
						<image 
							v-for="(img, imgIndex) in item.images" 
							:key="imgIndex"
							:src="img" 
							class="content-image"
							mode="aspectFill"
						></image>
					</view>
				</view>

				<view class="dynamic-actions">
					<view class="action-item" @click="toggleLike(item, index)">
						<text class="action-icon">{{ item.isLiked ? '❤️' : '🤍' }}</text>
						<text class="action-text">{{ item.likes }}</text>
					</view>
					<view class="action-item" @click="showComments(item)">
						<text class="action-icon">💬</text>
						<text class="action-text">{{ item.comments }}</text>
					</view>
					<view class="action-item" @click="shareDynamic(item)">
						<text class="action-icon">📤</text>
						<text class="action-text">分享</text>
					</view>
				</view>
			</view>
		</view>

		<view class="empty-state" v-if="dynamicList.length === 0">
			<text class="empty-icon">📝</text>
			<text class="empty-text">暂无动态</text>
			<text class="empty-desc">快来发布第一条动态吧！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dynamicList: [
					{
						id: 1,
						user: {
							name: '张三',
							avatar: ''
						},
						content: '今天完成了团队项目的第一个里程碑，感谢大家的努力！继续加油！',
						images: [],
						time: '2小时前',
						likes: 12,
						comments: 5,
						isLiked: false
					},
					{
						id: 2,
						user: {
							name: '李四',
							avatar: ''
						},
						content: '学习新技术真的很有趣，分享一个今天学到的前端小技巧...',
						images: [],
						time: '5小时前',
						likes: 8,
						comments: 3,
						isLiked: true
					},
					{
						id: 3,
						user: {
							name: '王五',
							avatar: ''
						},
						content: '团队聚餐，大家都很开心！期待下次的团建活动 🎉',
						images: [],
						time: '1天前',
						likes: 15,
						comments: 8,
						isLiked: false
					}
				]
			}
		},
		onLoad() {
			console.log('动态页面加载完成')
		},
		methods: {
			goToPublish() {
				uni.showToast({
					title: '发布功能开发中...',
					icon: 'none'
				})
			},
			toggleLike(item, index) {
				if (item.isLiked) {
					item.likes--
					item.isLiked = false
				} else {
					item.likes++
					item.isLiked = true
				}
				this.$forceUpdate()
			},
			showComments(item) {
				uni.showToast({
					title: '评论功能开发中...',
					icon: 'none'
				})
			},
			shareDynamic(item) {
				uni.showToast({
					title: '分享功能开发中...',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dynamic-page {
		min-height: 100vh;
		background: #f9fafb;
		padding: 40rpx;
	}

	.dynamic-header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.page-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 16rpx;
	}

	.page-subtitle {
		display: block;
		font-size: 28rpx;
		color: #6b7280;
	}

	.publish-section {
		margin-bottom: 40rpx;
	}

	.publish-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.publish-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
	}

	.publish-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.avatar-text {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.publish-content {
		flex: 1;
	}

	.publish-placeholder {
		font-size: 28rpx;
		color: #9ca3af;
	}

	.dynamic-list {
		margin-bottom: 40rpx;
	}

	.dynamic-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #8b5cf6, #a78bfa);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 4rpx;
	}

	.publish-time {
		display: block;
		font-size: 22rpx;
		color: #9ca3af;
	}

	.dynamic-content {
		margin-bottom: 24rpx;
	}

	.content-text {
		font-size: 28rpx;
		color: #1f2937;
		line-height: 1.6;
		margin-bottom: 16rpx;
	}

	.content-images {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8rpx;
	}

	.content-image {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.dynamic-actions {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f3f4f6;
	}

	.action-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		transition: all 0.2s ease;
	}

	.action-item:active {
		transform: scale(0.95);
	}

	.action-icon {
		font-size: 32rpx;
		margin-right: 8rpx;
	}

	.action-text {
		font-size: 24rpx;
		color: #6b7280;
	}

	.empty-state {
		text-align: center;
		padding: 80rpx 40rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		display: block;
		margin-bottom: 24rpx;
	}

	.empty-text {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 12rpx;
	}

	.empty-desc {
		display: block;
		font-size: 24rpx;
		color: #6b7280;
	}
</style>

